<!--  -->
<template>
  <view class='configFontsize'>
    <div class="topSearch">
      <div class="searchView">
        <u-search :clearabled="true" :showAction="false"></u-search>
      </div>
      <div class="iconMode">
        搜索
      </div>
    </div>
    <div class="historyForSearch">
      <div class="titleSearch">
        <div class="nameSear">搜索历史</div>
        <div class="iconSear">
          <div @click="spliceOneItem('edit')" v-show="!showDelete">
            <u-icon name="trash" size="20"></u-icon>
          </div>
          <div @click="spliceOneItem('ok')" v-show="showDelete">
            <u-icon name="checkmark-circle-fill" size="20"></u-icon>
          </div>
        </div>
      </div>
      <div class="searchContent">
        <div class="innerDetail" :class="showDelete ? 'animationClass' : ''" v-for="(item,index) in showList" :key="index">
          {{ item.name }}
          <div class="innerIcon" v-show="showDelete" @click="deleteDom(index)">
            <img src="@/static/delete.png" alt="">
          </div>
        </div>
        <div class="unfoldArr" v-if="isShow" @click="openArr">
          {{ isOpen === true ? '关闭' : '展开' }}
        </div>
      </div>
    </div>
    <div class="guessLike">
      <div class="guessFirLine">
        <div class="guessName">
          猜你想搜
        </div>
        <div class="guessIcon">
          <div>
            <u-icon name="reload" size="20"></u-icon>
          </div>
        </div>
      </div>
      <div class="guessContent">
        <div class="minContent" v-for="(item,index) in guessList" :key="index">{{ item.name }}</div>
      </div>
    </div>
  </view>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
    data() {
    //这里存放数据
      return {
        showDelete: false,
        isOpen: false,
        lineNum: 0,
        isShow: false,
        showList:[],
        historyList: [
          {
            name: '超厚牛仔裤dasdafas',
            id:9
          },
          {
            name: '上衣',
            id:10
          },
          {
            name: '牛仔裤',
            id:11
          },
          {
            name: '上衣',
            id:10
          },
          {
            name: '上衣',
            id:10
          },
          {
            name: '上衣',
            id:10
          },
          {
            name: '上衣',
            id:10
          }
        ],
        guessList: [
          {name: '类似于data概念'},
          {name: '类似于概念'},
          {name: '类似于data概念'},
          {name: '类似于概念'},
          {name: '类似于data概念'},
          {name: '类似于概念'},
          {name: '类似于data概念'},
          {name: '类似于概念'},
          {name: '类似于data概念'},
          {name: '类似于概念'},
          {name: '类似于data概念'},
          {name: '类似于概念'}
        ]
      };
    },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  // 
  onShow(){
    uni.setStorageSync('histortArr',JSON.stringify(this.historyList))
    const arr = JSON.parse(uni.getStorageSync('histortArr'))
    this.showList = arr
    this.getWidth()
  },
  //方法集合
  methods: {
    deleteDom(val){
      this.showList.splice(val,1)
      const arr = JSON.parse(uni.getStorageSync('histortArr'))
      arr.splice(val,1)
      uni.setStorageSync('histortArr',JSON.stringify(arr))
    },
    spliceOneItem(val){
      val === 'edit' ? this.showDelete = true : this.showDelete = false
    },
    // 展开关闭
    openArr(){
      this.showDelete = false
      if (this.isShow && !this.isOpen) {
        this.isOpen = true
        const arr = JSON.parse(uni.getStorageSync('histortArr'))
        this.showList = arr
      } else {
        this.isOpen = false
        this.lineNum = 0
        this.getWidth()
      }
    },
    // 
    getWidth(){
      this.isShow = false
      this.$nextTick(() => {
        let query = uni.createSelectorQuery().in(this);
        query.selectAll('.innerDetail').boundingClientRect((data) => {
          let firstLeft = 0
          if (data.length > 0) {
            firstLeft = data[0].left
          }
          for (let index = 0; index < data.length; index++) {
            const item = data[index];
            if (item.left === firstLeft) {
              this.lineNum++
              if (this.lineNum >= 2) {
                this.isShow = true
                const arr = this.showList
                arr.splice(index - 1)
                this.showList = arr
                return
              }
            }
          }
        }).exec();
      })
    }
  }
}
</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类

  @import "@/common/configStyle.scss";

  .configFontsize {
    font-size: $ruyi-config-fontsize;
    background-color: #fff;
  }
  .topSearch {
    height: 60rpx;
    margin-top: $ruyi-config-marginTop;
    width: $ruyi-config-outSideWidth;
    padding: 0 $ruyi-config-outSidePadding;
    display: flex;
    .searchView {
      width: 90%;
    }
    .iconMode {
      font-weight: 500;
      height: 60rpx;
      line-height: 60rpx;
      width: 10%;
      text-align: center;
      font-size: 30rpx;
    }
  }
  .historyForSearch {
    margin-top: $ruyi-config-marginTop;
    width: $ruyi-config-outSideWidth;
    padding: 0 $ruyi-config-outSidePadding;
    .titleSearch {
      width: 100%;
      display: flex;
      justify-content: space-between;
      height: 60rpx;
      line-height: 60rpx;
      .nameSear {
        font-weight: 500;
      }
      .iconSear {
        position: relative;
        width: 50rpx;
        height: 60rpx;
        div {
          position: absolute;
          top: 50%;
          transform: translateY(-15rpx);
        }
      }
    }
    .searchContent {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }
    .innerDetail {
      width: fit-content;
      padding: 10rpx 30rpx;
      background-color: $ruyi-config-backColor;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
      border-radius: 30px;
      position: relative;
      .innerIcon {
        position: absolute;
        width: 30rpx;
        height: 30rpx;
        top: -10rpx;
        right: -10rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
    .animationClass {
      animation: quiver 8s;
      box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.4);
    }
    @keyframes quiver { 
      5% {
          -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
          transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
      }
      6%,
      8%,
      10%,
      12% {
          -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 10deg);
          transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 10deg);
      }

      7%,
      9%,
      11% {
          -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -10deg);
          transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -10deg);
      }

      13% {
          -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
      }

    }
    .unfoldArr {
      padding: 10rpx 0;
    }
  }
  .guessLike {
    margin-top: $ruyi-config-marginTop;
    width: $ruyi-config-outSideWidth;
    padding: 0 $ruyi-config-outSidePadding;
    .guessFirLine {
      display: flex;
      justify-content: space-between;
      height: 60rpx;
      line-height: 60rpx;
      .guessName {
        font-weight: 500;
      }
      .guessIcon {
        position: relative;
        width: 50rpx;
        height: 60rpx;
        div {
          position: absolute;
          top: 50%;
          transform: translateY(-15rpx);
        }
      }
    }
    .guessContent {
      display: flex;
      flex-wrap: wrap;
      .minContent {
        width: 50%;
        height: 50rpx;
        line-height: 50rpx;
      }
    }
  }
</style>
